<template>
	<view class="container">
		<view class="status-bar"></view>
		<view class="list">
			<view class="comment" v-for="(item, index) in list" :key="index">
				<view class="comment-head flex-row">
					<view class="user flex-row">
						<image :src="item.avatar" class="gender"></image>
						<view class="info">
							<view class="name">{{ item.nickname }}</view>
							<view class="date">{{ item.createTime }}</view>
						</view>
					</view>
				</view>
				<view class="comment-body flex-row">
					<view class="content">{{ item.content }}</view>
					<view class="comment-util flex-row">
						<view></view>
						<uni-icons type="chat" size="22" @click="addComment(item)"></uni-icons>
						<uni-icons type="trash" size="22" @click="removeComment(item.id)"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => {}
		}
	},
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		// 添加评论
		addComment(item) {
			this.$emit('addComment', item);
		},
		// 删除评论
		removeComment(id) {
			
			this.$emit('removeComment', id);
		}
	}
};
</script>

<style lang="scss" scoped>
.comment {
	padding: 30rpx;
	margin-bottom: 20rpx;
	padding-bottom: 40rpx;
	background-color: #fff;
	border-bottom: 2rpx solid #f2f2f2;

	.comment-head {
		height: 120rpx;
		align-items: flex-start;

		.gender {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.info {
			margin-left: 28rpx;

			.name {
				font-size: 32rpx;
				font-weight: bold;
			}

			.date {
				color: #999;
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}

		.oper .item {
			margin-left: 30rpx;
		}
	}

	.comment-body {
		align-items: center;
		justify-content: space-between;
		.content {
			font-size: 28rpx;
		}
		.comment-util {
			align-items: center;
			width: 120rpx;
			justify-content: space-between;
		}
	}
}
</style>
